<template>
	<div class="banner">
		<van-swipe class="swiper" :autoplay="3000" indicator-color="white" :show-indicators="false">
			<van-swipe-item v-for="(item, index) in list" :key="index" @click="getLink(item.link)">
				<van-image class="banner-img" :src="item.pick" type="contain"></van-image>
			</van-swipe-item>
		</van-swipe>
	</div>
</template>

<script>
import { Swipe, SwipeItem, Image, Toast } from 'vant';

export default {
	name: 'banner-swiper',
	components: {
		'van-swipe': Swipe,
		'van-swipe-item': SwipeItem,
		'van-image': Image
	},
	data() {
		return {
			list: []
		};
	},
	mounted() {
		this.getBanner();
	},

	methods: {
		getBanner() {
			this.$service.jd.swiper
				.page({
					status: 'open'
				})
				.then(res => {
					this.list = res.list;
				})
				.catch(err => {
					Toast.fail(err);
				});
		},
		getLink(e) {
			window.location.href = e;
		}
	}
};
</script>

<style lang="scss" scoped>
.banner {
	width: 710px;
	height: 270px;
	margin: auto;
	margin-top: 22px;
	.swiper {
		width: 100%;
		height: 100%;
		border-radius: 16px;
		.banner-img {
			width: 100%;
			height: 100%;
		}
	}
}
</style>
